<script setup lang="ts">
import { ref } from 'vue'
import { Warning, Cpu, Document } from '@element-plus/icons-vue'

// 患者基本信息
const patientInfo = ref({
  id: 1,
  name: '张华明',
  gender: '男',
  age: 36,
  idCard: '330102198805156789',
  phone: '13812345678',
  address: '浙江省杭州市西湖区文三路123号',
  type: '初诊',
  department: '普外科',
  status: '等待中',
  appointmentTime: '2024/04/04 08:15'
})

// 当前选中的标签页
const activeTab = ref('checkReport')

// 检查报告数据
const checkReports = ref([
  {
    id: 1,
    name: '血常规检查',
    date: '2024/04/04',
    doctor: '李医生',
    status: '已完成',
    result: '正常'
  },
  {
    id: 2,
    name: 'B超检查',
    date: '2024/04/04',
    doctor: '王医生',
    status: '已完成',
    result: '轻度异常'
  }
])

// 用药记录数据
const medicationRecords = ref([
  {
    id: 1,
    name: '阿莫西林胶囊',
    dosage: '0.5g',
    frequency: '每日3次',
    duration: '7天',
    doctor: '李医生',
    date: '2024/04/04'
  },
  {
    id: 2,
    name: '布洛芬片',
    dosage: '0.2g',
    frequency: '需要时服用',
    duration: '3天',
    doctor: '李医生',
    date: '2024/04/04'
  }
])

// 就诊记录数据
const visitRecords = ref([
  {
    id: 1,
    date: '2024/04/04',
    department: '普外科',
    doctor: '李医生',
    diagnosis: '上呼吸道感染',
    treatment: '药物治疗'
  },
  {
    id: 2,
    date: '2024/03/15',
    department: '内科',
    doctor: '张医生',
    diagnosis: '胃炎',
    treatment: '药物治疗'
  }
])

// 切换左侧菜单
const activeMenu = ref('riskAssessment')
const handleMenuClick = (menu: string) => {
  activeMenu.value = menu
}

// 切换标签页
const handleTabClick = (tab: string) => {
  activeTab.value = tab
}
</script>

<template>
  <div class="patient-detail">
    <div class="patient-header">
      <h2>患者详情</h2>
      <div class="patient-basic-info">
        <div class="info-item">
          <span class="label">姓名：</span>
          <span>{{ patientInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">性别：</span>
          <span>{{ patientInfo.gender }}</span>
        </div>
        <div class="info-item">
          <span class="label">年龄：</span>
          <span>{{ patientInfo.age }}</span>
        </div>
        <div class="info-item">
          <span class="label">身份证：</span>
          <span>{{ patientInfo.idCard }}</span>
        </div>
        <div class="info-item">
          <span class="label">电话：</span>
          <span>{{ patientInfo.phone }}</span>
        </div>
        <div class="info-item">
          <span class="label">地址：</span>
          <span>{{ patientInfo.address }}</span>
        </div>
      </div>
    </div>

    <div class="detail-content">
      <!-- 左侧导航 -->
      <div class="left-menu">
        <div class="menu-section">
          <div class="section-title">智能辅助</div>
          <div 
            class="menu-item" 
            :class="{ active: activeMenu === 'riskAssessment' }"
            @click="handleMenuClick('riskAssessment')"
          >
            <el-icon><Warning /></el-icon>
            <span>风险评估</span>
          </div>
          <div 
            class="menu-item" 
            :class="{ active: activeMenu === 'aiDiagnosis' }"
            @click="handleMenuClick('aiDiagnosis')"
          >
            <el-icon><Cpu /></el-icon>
            <span>AI辅助诊断</span>
          </div>
          <div 
            class="menu-item" 
            :class="{ active: activeMenu === 'prescriptionSuggestion' }"
            @click="handleMenuClick('prescriptionSuggestion')"
          >
            <el-icon><Document /></el-icon>
            <span>处方建议</span>
          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="right-content">
        <!-- 标签页导航 -->
        <div class="tab-nav">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'checkReport' }"
            @click="handleTabClick('checkReport')"
          >
            检查报告
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'medicationRecord' }"
            @click="handleTabClick('medicationRecord')"
          >
            用药记录
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'visitRecord' }"
            @click="handleTabClick('visitRecord')"
          >
            就诊记录
          </div>
        </div>

        <!-- 标签页内容 -->
        <div class="tab-content">
          <!-- 检查报告 -->
          <div v-if="activeTab === 'checkReport'" class="tab-pane">
            <div class="report-title">检查报告</div>
            <el-table :data="checkReports" style="width: 100%" border>
              <el-table-column prop="name" label="检查名称" />
              <el-table-column prop="date" label="检查日期" width="120" />
              <el-table-column prop="doctor" label="检查医生" width="100" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="result" label="结果" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.result === '正常' ? 'success' : 'warning'">{{ row.result }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button size="small" type="primary">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 用药记录 -->
          <div v-if="activeTab === 'medicationRecord'" class="tab-pane">
            <div class="report-title">用药记录</div>
            <el-table :data="medicationRecords" style="width: 100%" border>
              <el-table-column prop="name" label="药品名称" />
              <el-table-column prop="dosage" label="剂量" width="80" />
              <el-table-column prop="frequency" label="频次" width="120" />
              <el-table-column prop="duration" label="疗程" width="80" />
              <el-table-column prop="doctor" label="开方医生" width="100" />
              <el-table-column prop="date" label="开方日期" width="120" />
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button size="small" type="primary">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 就诊记录 -->
          <div v-if="activeTab === 'visitRecord'" class="tab-pane">
            <div class="report-title">就诊记录</div>
            <el-table :data="visitRecords" style="width: 100%" border>
              <el-table-column prop="date" label="就诊日期" width="120" />
              <el-table-column prop="department" label="科室" width="100" />
              <el-table-column prop="doctor" label="医生" width="100" />
              <el-table-column prop="diagnosis" label="诊断" />
              <el-table-column prop="treatment" label="治疗方案" />
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button size="small" type="primary">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.patient-detail {
  padding: 20px;

  .patient-header {
    background: #f5f7fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;

    h2 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .patient-basic-info {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .info-item {
        min-width: 200px;
        
        .label {
          font-weight: 500;
          color: #606266;
        }
      }
    }
  }

  .detail-content {
    display: flex;
    gap: 20px;

    .left-menu {
      width: 180px;
      background: #f5f7fa;
      border-radius: 12px;
      padding: 15px 0;
      border-right: none;

      .menu-section {
        margin-bottom: 16px;
      }

      .section-title {
        padding: 8px 16px;
        font-size: 12px;
        color: #909399;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .menu-item {
        padding: 12px 20px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        color: #606266;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        margin: 4px 8px;
        display: flex;
        align-items: center;

        .el-icon {
          margin-right: 8px;
          font-size: 18px;
        }

        &:hover {
          background: linear-gradient(135deg, #8AF6C9 0%, #2BD18A 100%);
          color: #ffffff;
        }

        &.active {
          background: linear-gradient(135deg, #2BD18A 0%, #1AB777 100%);
          color: #ffffff;
          font-weight: 500;
        }
      }
    }

    .right-content {
      flex: 1;
      background: #f5f7fa;
      border-radius: 12px;
      padding: 20px;

      .tab-nav {
        display: flex;
        border-bottom: 1px solid #e4e7ed;
        margin-bottom: 20px;

        .tab-item {
          padding: 10px 20px;
          cursor: pointer;
          transition: all 0.3s;
          font-size: 14px;
          color: #606266;
          border-bottom: 2px solid transparent;

          &:hover {
            color: #409eff;
          }

          &.active {
            color: #409eff;
            border-bottom: 2px solid #409eff;
            font-weight: 500;
          }
        }
      }

      .tab-content {
        .tab-pane {
          .report-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #303133;
          }

          :deep(.el-table) {
            border-radius: 8px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>